<template>
  <div class="org-dialog">
    <el-dialog :visible.sync="visible">
      <div class="org-container">
        <div class="top-title flex flexac flexjcsb fs14 cfff p-l-20">
          <div class="title">{{ isEdit ? '修改机构' : '添加机构' }}</div>
          <i class="el-icon-close m-r-20" @click="handleCloseDialog" />
        </div>

        <div class="org-main flex m-t-30 p-l-30 p-r-30">
          <div class="org-menu m-r-40">
            <div class="org-grow">
              <div class="tree-title flex flexac fs14 cfff p-l-20">
                <div>机构菜单</div>
              </div>
              <!-- 左侧菜单栏 -->
              <div class="org-tree">
                <el-tree
                  ref="tree"
                  class="tree-grow m-t-10"
                  :data="setTree"
                  :default-expanded-keys="[1]"
                  :props="defaultProps"
                  :expand-on-click-node="true"
                  highlight-current
                  :node-key="NODE_KEY"
                  @node-click="handleNodeClick"
                >
                  <div slot-scope="{ node, data }" class="comp-tr-node">
                    <!-- 编辑状态 -->
                    <template v-if="node.isEdit">
                      <el-input :ref="'slotTreeInput' + data[NODE_KEY]" v-model="data.orgName" class="xiugxi21321" autofocus size="mini" @blur.stop="handleInput(node, data)" @keyup.enter.native="handleInput(node, data)" />
                    </template>
                    <!-- 非编辑状态 -->
                    <template v-else>
                      <!-- 名称： 新增节点增加class（is-new） -->
                      <span :title="node.label" :class="[data[NODE_KEY] < NODE_ID_START ? 'is-new' : '', 'comp-tr-node--name']">
                        {{ node.label }}
                      </span>
                    </template>
                  </div>
                </el-tree>
              </div>
            </div>
          </div>

          <div class="org-content flex flexac flexdc">
            <div class="right-title flex flexac flexjcsb fs14 cfff p-l-20">
              <div class="title">机构信息</div>
              <!-- <i class="el-icon-close m-r-20" @click="handleCloseDialog" /> -->
            </div>
            <div class="org-rightform m-t-40">
              <el-form ref="form" class="org-form m-t-30 m-l-100" :model="form" label-width="auto">
                <div class="m-t-30">
                  <el-form-item v-if="!isEdit" class="orgName" label="上级机构：">
                    <el-input v-model="form.parentName" class="orgName-input coInput" placeholder="请输入机构名称..." />
                  </el-form-item>

                  <el-form-item v-else class="orgName" label="上级机构：">
                    <el-select v-model="form.parentName" placeholder="请选择上级机构">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item class="orgName" label="机构名称：">
                    <el-input v-model="form.name" class="orgName-input coInput" placeholder="请输入机构名称..." />
                  </el-form-item>

                  <el-form-item class="orgName" label="机构简称：">
                    <el-input v-model="form.nameSimple" class="orgName-input coInput" placeholder="请输入机构简称..." />
                  </el-form-item>

                  <!-- <el-form-item class="orgType" label="机构类型：">
                    <el-select v-model="form.orgType" class="orgType-select coInput" placeholder="请选择机构类型">
                      <el-option v-for="item in orgTypes" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item> -->
                </div>
              </el-form>

              <div class="flex flexac flextc footer m-t-80 m-l-80">
                <el-button v-if="!isEdit" class="saveBtn btn m-r-20 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
                <el-button v-else type="success" class="btn m-r-20 el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
                <!-- <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import { updateOrg, createOrgAdd, findOrgList } from '@/api/baseInfo/authority/org'
import { showNotice, transData } from '@/utils/toolclass'
// import storage from '@/utils/storage'

export default {
  name: 'Org',
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean
    },
    dataOrg: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      // visible: true,
      options: [],
      formOrigin: {
        id: 0,
        name: '',
        nameSimple: '',
        parentId: '',
        parentName: '',
        version: 1
      },
      form: { ...this.dataOrg },
      setTree: [], // tree数据
      NODE_KEY: 'id', // id对应字段
      MAX_LEVEL: 3, // 设定最大层级
      NODE_ID_START: 0, // 新增节点id，逐次递减
      defaultProps: { // 默认设置
        children: 'children',
        label: 'name'
      },
      currentNode: '',
      paging: {
        pageIndex: 1,
        pageSize: 10,
        pageSizeArr: [10, 15, 20, 35],
        total: 0
      },
      param: {
        id: '',
        name: ''
      }
    }
  },
  computed: {},
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      if (this.form.id === 0) {
        this.form = {
          ...this.formOrigin
        }
      }
      this.visible = v
    },
    dataOrg(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        // console.log(v)
        this.form = { ...v }
      }
    }
  },
  created() {},
  mounted() {
    this.getAllOrgList()
  },
  methods: {
    getAllOrgList() {
      findOrgList('', '', this.paging.pageIndex, 1000000).then(res => {
        // console.log(res.data)
        if (res.code === '000000') {
          this.options = res.data.map(item => {
            const items = {
              value: item.id,
              label: item.name
            }
            return items
          })
          this.setTree = transData(res.data, 'id', 'parentId')
        }
      })
    },
    handleUpdate(data) {
      updateOrg(data).then(res => {
        if (res.code === '000000') {
          showNotice('success', '提示', '修改成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
          this.getAllOrgList()
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '修改失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleSave(type) {
      // console.log(this.form)
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入机构名称')
        return
      }
      if (!(/^\S+$/.test(this.form.nameSimple))) {
        showNotice('error', '提示', '请输入机构简称')
        return
      }
      if (!(/^\S+$/.test(this.form.parentId))) {
        showNotice('error', '提示', '请选择左侧机构')
        return
      }
      const params = {
        id: this.form.id,
        name: this.form.name,
        nameSimple: this.form.nameSimple,
        parentId: type === 0 ? this.form.parentId : this.form.parentName,
        version: this.form.version
      }
      // console.log(this.form.parentName)
      // console.log(params)
      if (type === 0) {
        // this.handleCreateAdd(params)
      } else {
        // this.handleUpdate(params)
      }
    },
    handleCreateAdd(data) {
      createOrgAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '添加成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
          this.getAllOrgList()
        } else {
          if (res.msg === '失败') {
            showNotice('error', '提示', '添加失败')
          } else {
            showNotice('error', '提示', res.msg)
          }
        }
      })
    },
    handleNodeClick(res) {
      this.currentNode = res
      this.form.parentId = this.currentNode.id
      // this.form.parentId = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      // console.log('====', this.form.parentId)
      this.form.parentName = res.name
      // console.log(this.currentNode)
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
    },
    handleRefresh() {
      this.refresh = true
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    }
  }

}
</script>

<style lang="scss">
@import "@/styles/public.scss";

.org-dialog {
  .org-container {
    margin-left: -200px;
    width: 900px;
    height: 600px;
    background: #ffffff;
    .top-title {
      height: 46px;
      background: #3CB371;
    }
    .org-main {
      .org-menu {
        .org-grow {
          overflow: auto;
          border: 1px solid #3CB371;
          border-radius: 3px;
          min-height: 500px;
          max-height: 500px;
          width: 260px;
          .tree-title {
            // width: 240px;
            height: 46px;
            background: #3CB371;
          }
          .org-tree {
            .tree-grow {}
          }
        }
      }
      .org-content {
        flex: 1;
        min-height: 500px;
        max-height: 500px;
        border: 1px solid #3CB371;
        border-radius: 3px;
        .right-title {
          width: 100%;
          height: 46px;
          background: #3CB371;
          .tree-title {}
          .el-icon-close {}
        }
        .org-rightform {
          .org-form {
            .coInput {
              width: 200px;
            }
            .selceOrg {
              .company {}
              .icon-xuanze:before {
                margin: 0 4px 0 -10px;
              }
              .select-btn {
                width: 96px;
                height: 40px;
                font-size: 14px;
              }
            }
            .orgName {
              .orgName-input {}
            }
            .orgType {
              .orgType-select {}
            }
          }
        }
        .footer {
          .btn {
            width: 100px;
            height: 40px;
          }
        }
      }
    }
  }
}
</style>
